<!-- 用户消息页面 -->
<template>
	<view class="user-messgae">
		
		<view class="user-messgae__search flex">
			
			<image src="/static/images/search.png" mode="aspectFill" class="user-messgae__search-icon"></image>
			<input type="text" class="user-messgae__search-input" placeholder="搜索"/>
		</view>
		
		<view class="user-messgae__items">
			
			<user-message-item class="user-messgae__item"
			v-for="(item,index) in userMessageItems"
			:key="item.id"
			:data="item.data"
			>
				<view class="user-messgae__item-line" v-if="index!==userMessageItems.length-1"></view>
			</user-message-item>
			
			<!-- <user-message-item class="user-messgae__item"></user-message-item> -->
			
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import userMessageItem from './userMessgaeItem/userMessgaeItem.vue'
	
	const userMessageItems = ref([
		{
			id: 'userMessageItem01',
			data: {
				image: '../../../../static/images/avatar/userAvatar01.png',
				name: 'xioayy',
				mes: '好的谢谢'
			}
		},
		{
			id: 'userMessageItem02', 
			data: {
				image: '../../../../static/images/avatar/userAvatar02.jpg',
				name: '不吃香菜',
				mes: '好呀'
			}
		},
		{
			id: 'userMessageItem03', 
			data: {
				image: '../../../../static/images/avatar/userAvatar03.jpg',
				name: '小菜一碟',
			}
		},
		{
			id: 'userMessageItem04', 
			data: {
				image: '../../../../static/images/avatar/ai.svg',
				name: '智能推荐助手',
				mes:'根据你的搜索频次以及发布的信息进行匹配，你关...'
			}
		}
	])
	

</script>

<style lang="scss" scoped>
.user-messgae{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	padding-top: 18rpx;
	&__search{
		width: 690rpx;
		height: 54rpx;
		margin: 0 auto;
		margin-bottom: 18rpx;
		background-color: #fff;
		// justify-content: center;
		border-radius: 20rpx;
		&-icon{
			width: 30rpx;
			height: 30rpx;
			margin-left: 299rpx;
			margin-right: 15rpx;
		}
		
		&-input{
			font-size: 24rpx;
			color: #797979;
		}
	}
	
	&__items{
		width: 100%;
		height: auto;
		background-color: #fff;
	}
	
	&__item-line{
		width: 690rpx;
		height: 2rpx;
		background-color: #d7d7d7;
		margin: 0 auto;
		// border-bottom: 4rpx solid #d7d7d7;
	}
}
</style>
